<template>
  <div class="external-service">
    <div class="external-item" v-for="(item, i) in list" :key="i">
      <div class="eitem-label">{{item.Name}}</div>
      <span :class="item.Status === 'DISABLE' ? 'eitem-status' : 'eitem-status active'">{{item.Status | statusFilter}}</span>
      <el-button class="eitem-btn" size="small" :type="item.Status === 'DISABLE' ? 'primary' : ''" @click="modifyExtended(item)">{{item.Status | statusFilter2}}</el-button>
    </div>

    <el-dialog
      title="请管理员扫码授权开通"
      :visible.sync="dialogVisible"
      width="30%"
      center
      :before-close="handleClose"
      :close-on-click-modal="false">
      <div>
        请联系超管或法人完成服务开通操作，链接如下：
        <el-link type="primary" :href="operateUrl" :underline="false" style="marginTop: 14px; fontSize: 12px; lineHeight: 22px;">{{operateUrl}}</el-link>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getExternalList, updateExternal } from '@common/api/external';

export default {
  name: 'externalService',
  data() {
    return {
      listLoading: false,
      list: [],
      dialogVisible: false,
      operateUrl: '',
    };
  },
  filters: {
    statusFilter(status) {
      if (status === 'ENABLE') {
        return '已开通';
      }
      if (status === 'DISABLE') {
        return '未开通';
      }
    },
    statusFilter2(status) {
      if (status === 'ENABLE') {
        return '关闭';
      }
      if (status === 'DISABLE') {
        return '开通';
      }
    },
  },
  created() {
    this.fetchList();
  },
  methods: {
    async fetchList() {
      try {
        this.listLoading = true;
        const res = await getExternalList();
        // console.log('getExternalList', res);
        if (res?.code === 20000 && res?.data?.AuthInfo?.length) {
          this.list = res.data.AuthInfo.sort(this.compare('Type'));
        } else {
          this.list = [];
        }
        this.listLoading = false;
      } catch (error) {
        console.log('error:', error);
        this.listLoading = false;
        this.$message.error(error);
      }
    },

    modifyExtended(item) {
      this.$confirm(`确认要${item.Status === 'DISABLE' ? '开通' : '关闭'}【${item.Name}】吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        if (item) {
          try {
            const res = await updateExternal({
              ServiceType: item.Type,
              Operate: (item.Status === 'ENABLE') ? 'CLOSE' : 'OPEN',
            });
            if (res?.code === 20000) {
              if (res?.data?.OperateUrl) {
                this.operateUrl = res.data.OperateUrl;
                this.dialogVisible = true;
              } else {
                this.fetchList();
                this.$message({
                  message: item.Status === 'ENABLE' ? `${item.Name}关闭成功` : `${item.Name}开通成功`,
                  type: 'success',
                });
              }
            }
          } catch (error) {
            console.log('error: ', error);
            this.$message.error(error);
          }
        }
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          });
        });
    },

    handleClose() {
      this.dialogVisible = false;
    },

    compare(prop) {
      return function (obj1, obj2) {
        let val1 = obj1[prop];
        let val2 = obj2[prop];
        if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
          val1 = Number(val1);
          val2 = Number(val2);
        }
        if (val1 < val2) {
          return -1;
        } if (val1 > val2) {
          return 1;
        }
        return 0;
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.external-service {
  position: relative;
  padding: 20px 30px;
  .external-item {
    font-size: 14px;
    margin-bottom: 20px;
    .eitem-label {
      display: inline-block;
      width: 400px;
    }
    .eitem-status {
      display: inline-block;
      margin-right: 30px;
      color: #C0C4CC;
      font-weight: 600;
      &.active {
        color: #409EFF;
      }
    }
  }
}
</style>

